
import {Button, Checkbox, Col, Form, Input, Row, Select} from 'antd';
import CustomSearch from "@/pages/Components/Search";
import './index.scss'
import {useSearchParams} from "react-router-dom";
import {useEffect, useRef} from "react";

import {http} from "@/utils";


const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);
};

// const onFinish =  (values) => {
//   return values
// };

const { Option } = Select
const Edit = () => {

  const [form] = Form.useForm();

  const [params] = useSearchParams()
  const id = params.get('id')
  const onFinish = async (values) => {
    console.log('Success:', values);
    await http.patch(`http://localhost:3001/userList/${id}`,{
      // ...params,
      ...values
    })
  };

  useEffect(()=>{
    const loadDetail = async ()=>{
      const res = await http.get(`http://localhost:3001/userList/${id}`)
    // todo  表单数据回显
      form.setFieldsValue(res)

      // console.log( onFinish(res))
    }

    if(id){
      loadDetail()
      onFinish()

    }
  },[id])



  // useEffect(()=>{
  //   const submit = async (values) => {
  //     console.log('Success:', values);
  //     await http.patch(`http://localhost:3001/userList/${id}`)
  //
  //   };
  //   submit()
  // },[])


  // const onGenderChange = (value) => {
  //   switch (value) {
  //     case 'male':
  //       form.setFieldsValue({
  //         note: 'Hi, man!',
  //       });
  //       break;
  //     case 'female':
  //       form.setFieldsValue({
  //         note: 'Hi, lady!',
  //       });
  //       break;
  //     case 'other':
  //       form.setFieldsValue({
  //         note: 'Hi there!',
  //       });
  //       break;
  //     default:
  //   }
  // };
  const onReset = () => {
    form.resetFields();
  };
  return (
    <div style={{height:'100%'}} className='addUser'>
      <Form
        form={form}
        name="control-hooks"
        onFinish={onFinish}
        style={{
          width: '100%',
          padding:'20px',
        }}
      >
        <div style={{display:'flex',marginBottom:'20px'}}>
          <Form.Item
            name="username"
            label="姓名"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="organization"
            label="组织架构"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="phone"
            label="手机号码"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="gender"
            label="性别"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Select
              placeholder="请选择性别"
              // onChange={onGenderChange}
              allowClear
            >
              <Option value="male">男</Option>
              <Option value="female">女</Option>
              <Option value="other">其它</Option>
            </Select>
          </Form.Item>
        </div>


        <div style={{display:'flex',marginBottom:'20px',width:'50%'}}>
          <Form.Item
            name="nickname"
            label="用户名"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>


          <div style={{flex:1,display:'flex',alignItems:'flex-end',padding:0}}>
            <Form.Item
              style={{width:'100%',margin:'20px 0'}}
              name='password'
              label="密码"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input />

            </Form.Item>
            <Button type="primary" style={{marginBottom:'-11px'}}>重置密码</Button>
          </div>

        </div>








        {/*<Form.Item*/}
        {/*  noStyle*/}
        {/*  shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}*/}
        {/*>*/}
        {/*  {({ getFieldValue }) =>*/}
        {/*    getFieldValue('gender') === 'other' ? (*/}
        {/*      <Form.Item*/}
        {/*        name="customizeGender"*/}
        {/*        label="Customize Gender"*/}
        {/*        rules={[*/}
        {/*          {*/}
        {/*            required: true,*/}
        {/*          },*/}
        {/*        ]}*/}
        {/*      >*/}
        {/*        <Input />*/}
        {/*      </Form.Item>*/}
        {/*    ) : null*/}
        {/*  }*/}
        {/*</Form.Item>*/}



        <div style={{display:'flex',marginBottom:'50px'}}>
          <Form.Item
            name="role"
            label="角色信息"
          >
            <Input />
          </Form.Item>
        </div>

        <div style={{minHeight:'400px'}}>
          <Form.Item>
            <Button htmlType="button" onClick={onReset} style={{marginRight:'20px'}}>
              取消
            </Button>
            <Button type="primary" htmlType="submit" onClick={onFinish}>
              提交
            </Button>
          </Form.Item>
        </div>

      </Form>
    </div>
  );
};

export default Edit;
